<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jjQuery制作垂直图片上下滚动切换 - 素材目录</title>
		<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
		<script src="jquery.carouFredSel-6.1.0-packed.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function() {
				$('#carousel').carouFredSel({
					responsive: true,
					direction: 'down',
					height: '100%',
					items: {
						height: 150,
						width: '160%',
						visible: {
							min: 2,
							max: 8
						}
					},
					scroll: {
						items: '-1'
					}
				});
			});
		</script>
		<style type="text/css">
			html, body {
				height: 100%;
				padding: 0;
				margin: 0;
			}
			body {
				background-color: #f1e2f6;
				position: relative;
				min-height: 300px !important;
			}
			body * {
				font-family: Arial, Geneva, SunSans-Regular, sans-serif;
				font-size: 14px;
				color: #333;
				line-height: 22px;
			}
			body h3 {
				font-family: Arial, Geneva, SunSans-Regular, sans-serif;
				font-size: 20px;
				text-align: center;
				color: #999;
				margin: 0;
				padding-top: 50px;
				position: relative;
				z-index: 2;
			}

			.caroufredsel_wrapper {
				margin: auto !important;
			}
			#carousel {
				height: 100%;
			}
			#carousel img {
				display: block;
				float: left;
				margin: 5px;
			}

			#donate-spacer {
				height: 5px;
			}
			#donate {
				border-top: 1px solid #999;
				width: 750px;
				padding: 50px 75px;
				margin: 0 auto;
				overflow: hidden;
			}
			#donate p, #donate form {
				margin: 0;
				float: left;
			}
			#donate p {
				width: 650px;
			}
			#donate form {
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div id="carousel">
			<img src="img/i01.jpg" width="400" height="250" />
			<img src="img/i02.jpg" width="400" height="250" />
			<img src="img/i03.jpg" width="400" height="250" />
			<img src="img/i04.jpg" width="400" height="250" />
			<img src="img/i05.jpg" width="400" height="250" />
			<img src="img/i06.jpg" width="400" height="250" />
			<img src="img/i07.jpg" width="400" height="250" />
			<img src="img/i08.jpg" width="400" height="250" />
			<img src="img/i09.jpg" width="400" height="250" />
			<img src="img/i10.jpg" width="400" height="250" />
		</div>
	</body>
</html>